<template>
	<view>
		<view class="text-darkGray">
			<cu-custom :isBack="true" :isFull="true" bgColor="bg-white solids-bottom" isPointer="all">
				<block slot="content">
					<view class="uni-flex uni-row input-view" style="justify-content: center;">
						<view :class="['text-btn',currenttitle[0]]" @tap="onClickItemTitle(0)">
							图片
						</view>
						<view :class="['text-btn',currenttitle[1]]" @tap="onClickItemTitle(1)">
							视频
						</view>
					</view>
				</block>
				<block slot="right"></block>
			</cu-custom>
		</view>
		<view class="">
			<uni-segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" styleType="text" activeColor="#e54d42"></uni-segmented-control>
		</view>
		<view class="cu-form-group padding" v-show="currenttitle[0]=='on'">
			<view class="grid col-3 grid-square flex-sub" v-show="current === 0">
				<view class="padding-xs bg-img2" v-for="(item,index) in imgUrls"
				 :key="index" @tap="ViewImage3" :data-url="imgUrls[index]">
					<image :src="imgUrls[index]" mode="aspectFill"></image>
				</view>
			</view>
			<view class="grid col-3 grid-square flex-sub" v-show="current === 1">
				<view class="padding-xs bg-img2" v-for="(item,index) in imgUrls"
				 :key="index" @tap="ViewImage3" :data-url="imgUrls[index]">
					<image :src="imgUrls[index]" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="cu-form-group padding" v-show="currenttitle[1]=='on'">
			<view class="grid col-3 grid-square flex-sub" v-show="current === 0">
				<view class="padding-xs bg-img2" @tap="ViewVideo" data-url="https://s3.bytecdn.cn/aweme/resource/web/static/image/index/tvc-v2_30097df.mp4" v-for="(item,index) in imgUrls" :key="index">
					<image src="../../../static/video.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="grid col-3 grid-square flex-sub" v-show="current === 1">
				<view class="padding-xs bg-img2" @tap="ViewVideo" data-url="https://s3.bytecdn.cn/aweme/resource/web/static/image/index/tvc-v2_30097df.mp4" v-for="(item,index) in imgUrls" :key="index">
					<image src="../../../static/video.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '../../../components/uni-segmented-control.vue';
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				currenttitle:["on",""],
				current: 1,
				imgUrls: ['https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?0',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?1',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?2',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?3',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?4',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?5',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?6',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?7',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?8',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?9',
						'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?10',],
				items: [
					'官方图片',
					'经纪人上传'
				],
			};
		},
		onLoad() {
			var len = this.imgUrls.length;
			this.items[0] +="("+len+")" ;
			this.items[1] +="("+len+")" ;
			console.info(this.items);
			this.onClickItem(0);
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
			onClickItemTitle(index) {
				if (this.currenttitle[index] !== "on") {
					this.currenttitle = ["", ""];
					this.currenttitle[index] = "on"
				}
			},
			ViewImage3(e) {
				uni.previewImage({
					urls: this.imgUrls,
					current: e.currentTarget.dataset.url
				});
			},
			ViewVideo(e) {
				uni.navigateTo({
					url: '../video/video?url='+e.currentTarget.dataset.url
				});
			},
		}
	}
</script>

<style lang="less">
	.uni-row .text-btn {
		padding: 0 20upx;
		border: 2upx solid #ff5c5c;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #ff5c5c;
		font-size: 28upx;
		box-sizing: border-box;
		min-width: 35%;
	}
	.uni-row .text-btn.on {
		background: #ff5c5c;
		color: #fff;
	}
	.uni-row .text-btn:first-child {
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
	}
	.uni-row .text-btn:last-child {
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	.article-content {
		padding: 30upx;
		overflow: hidden;
		font-size: 30upx;
		background: #FFFFFF;
		position: relative;
	}
	.bg-img2{
		position: relative;
		image{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
</style>
